<template>
  <div>
    <ul>
      <!-- 当我们 岁数组 -->
      <li v-for="(item, index) in arr" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="btn">数组进行翻转</button>
    <button @click="sliceFn">数组进行截取</button>
    <button @click="updateFn">数组更新</button>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      arr: ["1.小张", "2.小李", "3.小吴", "4.小赵"],
    };
  },
  methods: {
    btn() {
      this.arr.reverse();
      // this.arr.push('5.小畅')
    },
    sliceFn() {
      // slice截取数组不会改变原来的数组 而是返回一个截取后的新数组
      const res = this.arr.slice(0, 3);
      // console.log(res);
      this.arr = res;
    },
    updateFn() {
      // 如果我们使用下标 更改数组，并不会触发页面更新
      // this.arr[0] = "你好";
      // console.log(this.arr);

      this.$set(this.arr, 1, "你好我叫吴亦凡");
      // 可以利用 this.$set() 方法实现更新
      // 参数一：要更改的目标
      // 参数二：要更改的位置 对于数组来说就是索引，对于对象来说就是key
      // 参数三；要更改的值
    },
  },
};
</script>
  
  <style>
</style>